<template>
  <div class="content">
    <div class="msglist">
      <mycard :messages="clickData"></mycard>
      <!-- <search></search> -->
      <chatlist></chatlist>
    </div>
    <div class="chatbox">
      <div v-if="selectId != 0">
        <message></message>
        <v-text></v-text>
      </div>
      <div class="no-choise" v-else>
        暂无选择好友
      </div>
    </div>

  </div>
</template>

<script>
import mycard from "../../components/mycard/mycard"
import search from "../../components/search/search"
import chatlist from "../../components/chatlist/chatlist"
import message from "../../components/message/message"
import vText from "../../components/text/text"
import { mapState, mapActions, mapGetters } from "vuex"
export default {
  components: {
    mycard,
    search,
    chatlist,
    message,
    vText
  },
  data(){
      return{
        inpMessage:'',
        clickData:'',
        num:1
      }
    },
  computed: {
    ...mapState({
      selectId: state => state.chat.selectId
    })
  },
  created(){
     this.clickData = 0
  },
  methods:{

  },
  mounted(){
    // 全局监听然后显示隐藏用户下拉
    let This = this;
      // document.body.addEventListener('click',function( event ){
      //   var className = event.target.className;
      //   if(className !='icon iconfont icon-more' || className == ''){
      //    This.clickData = (new Date()).getTime();
      //   }
      // },false);
  }
}
</script>

<style lang="stylus" scoped>
.content {
  display: flex;
  /*width: 1024px;*/
  height 100%

  .sidebar {
    width: 280px;
    height: 72px;
    background: #2b2c2f;
  }

  .msglist {
    width: 280px;
    background: #fff;
  }

  .chatbox {
    flex: 1;
  }

  .no-choise {
    text-align center;
    margin-top 250px;
    font-size 40px;
    color #999;
  }
}
</style>
